  <template>
  <div>
    <!--管理员页面-->
    <div class="top-box">
      <div class="admin-top">
        <router-link target="_blank" to="/HomePage" title="网站首页">
          <img src="../../assets/images/common/logo2.png" width="70px" style="margin-top: 5px">
        </router-link>
        <div class="headPho" @mouseover="homeSubShow()" @mouseout="homeSubDisappear()">
          <div class="home" id="home">
            <img title="." id="my" src="../../assets/images/common/not-login.png" alt="" width="25px" style="border-radius: 50%">
            <div class="home-sub" style="display: none;" id="home-sub">
              <div class="home-sub-top"></div>
              <ul>
                <a href="javscript:;"><li><i class="iconfont icon-shouye" style="font-size: 20px"></i> 网站主页 </li></a>
                <a href="javascript:;"><li @click="logout"><i class="iconfont icon-tuichu" style="font-size: 20px"></i> 退出登录</li></a>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-box">
      <div class="admin-bottom">
        <div class="admin-bottom-nav" id="nav-box">
          <a href="javascript:;" title="展开或收起"><h3 class="tranfrom" id="tranfrom" @click="onclickNavBox"><i class="iconfont icon-sandaogang1"></i></h3></a>
          <router-link to="/adminPage/data" title="平台数据">
            <div v-if="this.component == 'data'" class="nav" @click="onclickNav" style="color: rgb(0, 181, 187)">
              <i class="iconfont icon-wodeshuju nav-icon"></i>
              <div class="text" style="font-size: 18px;"><i class="iconfont icon-wodeshuju"></i> 数据</div>
            </div>
            <div v-else class="nav" @click="onclickNav" style="color: rgb(201, 201, 201)">
              <i class="iconfont icon-wodeshuju nav-icon"></i>
              <div class="text" style="font-size: 18px;"><i class="iconfont icon-wodeshuju"></i> 数据</div>
            </div>
          </router-link>
          <router-link to="/adminPage/news" title="举报中心">
            <div v-if="this.component == 'news'" class="nav" @click="onclickNav" style="color: rgb(0, 181, 187)">
              <i class="iconfont icon-xiaoxi nav-icon"></i>
              <div class="text" style="font-size: 18px;"><i class="iconfont icon-xiaoxi"></i> 举报</div>
            </div>
            <div v-else class="nav" @click="onclickNav" style="color: rgb(201, 201, 201)">
              <i class="iconfont icon-xiaoxi nav-icon"></i>
              <div class="text" style="font-size: 18px;"><i class="iconfont icon-xiaoxi"></i> 举报</div>
            </div>
          </router-link>
          <router-link to="/adminPage/errorUser" title="违规用户">
            <div v-if="this.component == 'errorUser'" class="nav" @click="onclickNav" style="color: rgb(0, 181, 187)">
              <i class="iconfont icon-yonghuguanli nav-icon"></i>
              <div class="text" style="font-size: 18px;"><i class="iconfont icon-yonghuguanli"></i> 违规</div>
            </div>
            <div v-else class="nav" @click="onclickNav" style="color: rgb(201, 201, 201)">
              <i class="iconfont icon-yonghuguanli nav-icon"></i>
              <div class="text" style="font-size: 18px;"><i class="iconfont icon-yonghuguanli"></i> 违规</div>
            </div>
          </router-link>
          <router-link to="/adminPage/publish" title="推送消息">
            <div v-if="this.component == 'publish'" class="nav" @click="onclickNav" style="color: rgb(0, 181, 187)">
              <i class="iconfont icon-tuisong nav-icon"></i>
              <div class="text" style="font-size: 18px;"><i class="iconfont icon-tuisong"></i> 推送</div>
            </div>
            <div v-else class="nav" @click="onclickNav" style="color: rgb(201, 201, 201)">
              <i class="iconfont icon-tuisong nav-icon"></i>
              <div class="text" style="font-size: 18px;"><i class="iconfont icon-tuisong"></i> 推送</div>
            </div>
          </router-link>
<!--          <router-link to="/adminPage/ad" title="广告管理">-->
<!--            <div v-if="this.component == 'ad'" class="nav" @click="onclickNav" style="color: rgb(0, 181, 187)">-->
<!--              <i class="iconfont icon-guanggaoguanli2 nav-icon"></i>-->
<!--              <div class="text" style="font-size: 18px;"><i class="iconfont icon-guanggaoguanli2"></i> 广告</div>-->
<!--            </div>-->
<!--            <div v-else class="nav" @click="onclickNav" style="color: rgb(201, 201, 201)">-->
<!--              <i class="iconfont icon-guanggaoguanli2 nav-icon"></i>-->
<!--              <div class="text" style="font-size: 18px;"><i class="iconfont icon-guanggaoguanli2"></i> 广告</div>-->
<!--            </div>-->
<!--          </router-link>-->
          <router-link to="/adminPage/download"  title="文件下载">
            <div v-if="this.component == 'download'" class="nav" @click="onclickNav" style="color: rgb(0, 181, 187)">
              <i class="iconfont icon-xiazai1 nav-icon"></i>
              <div class="text" style="font-size: 18px;"><i class="iconfont icon-xiazai1"></i> 下载</div>
            </div>
            <div v-else class="nav" @click="onclickNav" style="color: rgb(201, 201, 201)">
              <i class="iconfont icon-xiazai1 nav-icon"></i>
              <div class="text" style="font-size: 18px;"><i class="iconfont icon-xiazai1"></i> 下载</div>
            </div>
          </router-link>
          <router-link to="/adminPage/setting" title="管理">
            <div v-if="this.component == 'setting'" class="nav" @click="onclickNav" style="color: rgb(0, 181, 187)">
              <i class="iconfont icon-shezhi1 nav-icon"></i>
              <div class="text" style="font-size: 18px;"><i class="iconfont icon-shezhi1"></i> 管理</div>
            </div>
            <div v-else class="nav" @click="onclickNav" style="color: rgb(201, 201, 201)">
              <i class="iconfont icon-shezhi1 nav-icon"></i>
              <div class="text" style="font-size: 18px;"><i class="iconfont icon-shezhi1"></i> 管理</div>
            </div>
          </router-link>
        </div>
        <div class="admin-bottom-content" id="content-box">
          <div class="admin-bottom-content-title" id="centent-title">
            <i class="iconfont icon-xiaoxizhongxin" style="font-size: 16px; color:tomato;"></i>
            <strong>{{tips}}</strong>
          </div>
            <div class="admin-bottom-content-content">
              <!--填充-->
              <router-view @component="routerView"></router-view>
            </div>
        </div>
      </div>
    </div>
    <BackUp />
  </div>
</template>

<script>
    import BackUp from '../common/BackUp'

    let counts = 0
    export default {
        name: "AdminFrame",
        components:{
            BackUp
        },
        data(){
            return{
                tips:'抱歉，缓存服务器异常，暂时没有数据，我们正在排查中。',
                component:'',
                baseURL: "http://localhost:8081/adminLog/logout"
            }
        },
        mounted(){
            this.getRandTip()
            window.addEventListener('scroll', this.scrollEvent,false)
        },
        methods:{
            getRandTip(){
                this.axios.post("http://localhost:8081/cache/getRandTip").then(res=>{
                    this.tips = res.data
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            routerView(val){
                this.component = val
            },
            logout(){
                this.axios.post(this.baseURL).then((res) =>{
                    if (res.data==false){
                        this.failOpt("退出登录失败")
                    }else {
                        this.$router.push('/adminPage/loginCode')
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            onclickNavBox(){
                document.getElementById("nav-box").style.transition="0.5s"
                if(counts%2==0){
                    document.getElementById("nav-box").style.width="13%"
                    document.getElementById("content-box").style.width="86%"
                    for(let i = 0;i < document.getElementsByClassName("text").length;i++){
                        document.getElementsByClassName("text")[i].style.transition="0.4s"
                        document.getElementsByClassName("text")[i].style.width="100%"
                        document.getElementsByClassName("nav-icon")[i].style.display="none"
                    }
                }else{
                    document.getElementById("nav-box").style.width="5.5%"
                    document.getElementById("content-box").style.width="93.5%"
                    for(let i = 0;i < document.getElementsByClassName("text").length;i++){
                        document.getElementsByClassName("text")[i].style.transition="0s"
                        document.getElementsByClassName("text")[i].style.width="0px"
                        document.getElementsByClassName("nav-icon")[i].style.display="block"
                    }
                }
                counts++
            },
            onclickNav(){
                let timer = setInterval(function () {
                    let heig = parseInt(window.scrollY);
                    if (heig > 0) {
                        window.scrollTo(0, heig-50);
                    }else {
                        clearInterval(timer);
                    }
                }, 1)
            },
            homeSubShow() {
                if(document.getElementById("home-icon")) document.getElementById("home-icon").className="iconfont icon-addressbook_fill"
                document.getElementById("home-sub").style.display="block"
            },
            homeSubDisappear() {
                if(document.getElementById("home-icon")) document.getElementById("home-icon").className="iconfont icon-addressbook"
                document.getElementById("home-sub").style.display="none"
            },
            scrollEvent() {
                document.getElementById("nav-box").style.transition="0s"
                document.getElementById("nav-box").style.marginTop=60+(window.scrollY)+"px"
                // 阴影
                let contentTitle = document.getElementById("centent-title")
                if (window.scrollY > 0) {
                    contentTitle.style.boxShadow="0 15px 10px -15px #b0b0b0"
                    contentTitle.style.borderRadius = "0px";
                }else{
                    contentTitle.style.boxShadow="0 15px 10px -15px transparent"
                    contentTitle.style.borderRadius = "3px";
                }
            },
            successOpt(message) {
                this.$notify({
                    title: '成功',
                    message: message,
                    type: 'success'
                })
            },
            failOpt(message) {
                this.$notify.error({
                    title: '错误',
                    message: message
                });
            }
        }
    }
</script>

<style scoped>
  .top-box{
    width: 100%;
    margin: 0px auto;
    letter-spacing: 1px;
    background-color: rgb(51, 51, 51);
    position: fixed;
    top: 0px;
    letter-spacing: 1px;
    z-index: 999;
  }
  .admin-top{
    /*width: 90%;*/
    width: 1150px;
    height: 50px;
    margin: 0px auto;
    background-color: rgb(51, 51, 51);
    position: relative;

  }
  /*.logo{*/
  /*  position: absolute;*/
  /*  top: 15px;*/
  /*  left: 0px;*/
  /*  font-size: 20px;*/
  /*  color: rgb(226, 226, 226);*/
  /*  font-weight: bolder;*/

  /*}*/

  .headPho{
    position: absolute;
    top: 12px;
    right: 0px;
    border-radius: 50%;
  }
  .home{
    position: relative;
  }
  .home-sub{
    width: 150px;
    height: 102px;
    background-color: rgba(255, 255, 255, 0.95);
    margin-top: 20px;
    position: absolute;
    top: 23px;
    right: -62px;
    box-shadow: 0px 0px 5px rgb(190, 190, 190) ;
    border-radius: 3px;
  }
  .home-sub-top{
    width: 0px;
    height: 0px;
    border: transparent solid 10px;
    border-bottom: rgb(255, 255, 255) solid 10px;
    position: absolute;
    top: -20px;
    left: 65px;
  }
  .home-sub ul{
    position:absolute;
    top: -10px;
    left: -40px;
  }
  .home-sub li{
    width: 150px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 16px;
    color: rgb(63, 63, 63);
  }
  .home-sub li:hover{
    background-color: #f7f7f7;
  }
  .home-sub li:nth-child(1){
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  .home-sub li:nth-child(2){
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }


  .bottom-box{
    /*width: 90%;*/
    width: 1150px;
    margin: 0px auto;
    letter-spacing: 1px;
  }
  .admin-bottom-nav{
    float: left;
    /*min-height: 450px;*/
    width: 5.5%;
    margin-top: 60px;
    border-radius: 3px;
    transition: 0.5s;
    background-color: rgb(104, 104, 104);
  }
  .nav,.tranfrom{
    width: 90%;
    height: 45px;
    margin:10px auto;
    line-height: 38px;
    text-align: center;
    color: rgb(201, 201, 201);
    font-size: 28px;
    border-radius: 3px;
    transition: 0.3s;

    position: relative;
    /*background-color: tomato;*/
  }
  .nav div{
    float: left;
  }
  .text{
    width: 0px;
    height: 45px;
    margin: 0 auto;
    overflow: hidden;
    position: absolute;
    top: 0px;
  }
  .tranfrom:hover i{
    color: white;
  }
  .nav:hover{
    transform: translateX(5px) translateY(-5px);
  }
  .nav:hover{
    font-size: 22px;
  }
  .admin-bottom-content{
    float: left;
    min-height: 540px;
    width: 93.5%;
    margin-left: 10px;
    margin-top: 60px;
    border-radius: 3px;
    transition: 0.5s;
  }
  .admin-bottom-content-title{
    width: 98.2%;
    height: 50px;
    color: rgb(99, 99, 99);
    font-size: 13px;
    line-height: 50px;
    padding-left: 20px;
    margin-bottom: 10px;
    border-radius: 3px;
    background-color: rgb(255, 255, 255);
    position: sticky;
    top: 50px;
    transition: 0.2s;
    z-index: 9;
  }
  .admin-bottom-content-content{
    width: 100%;
    min-height: 480px;
    border-radius: 3px;
  }
</style>
